import { setStyle } from "./util.js";

const option = {
    data: [
        {
            name: "贾白云",
            img: "1.jpg",
            time: "2023.12.16",
            children: [
                { name: "港仔", img: "2.jpg", time: "2023.12.11" },
                { name: "小嘚瑟", img: "3.jpg", time: "2023.12.12" },
                { name: "小刚吉", img: "4.jpg", time: "2023.12.13" },
                { name: "港仔", img: "2.jpg", time: "2023.12.11" },
                { name: "小嘚瑟", img: "3.jpg", time: "2023.12.12" },
                { name: "小刚吉", img: "4.jpg", time: "2023.12.13" },
            ],
        },
    ],
    render: (container, data) => {
        renderNode(container, data);
    },
};

const renderNode = (container, data) => {
    debugger
    if (data.children?.length) {
        setStyle(container, {
            width: "180px",
            height: "180px",
        });
        container.innerHTML = `<div style='display:flex;flex-direction:column;align-items:center;border-radius:50%;height:100%;background:radial-gradient(red,blue)'>
    <img src='./image/${data.img}' style='width:100px;height:100px;margin-top:20px;border-radius:50%;' draggable=false></img>
    <div style='margin:4px 0;color:#ffffff;font-size:16px'>${data.name}</div>
    <div style='font-size:12px;color:#bbbbbb'>Time：${data.time}</div>
    </div>`;
    } else {
        setStyle(container, {
            width: "120px",
            height: "120px",
        });
        container.innerHTML = `<div style='display:flex;flex-direction:column;align-items:center;border-radius:50%;height:100%;background:radial-gradient(red,blue)'>
    <img src='./image/${data.img}' style='width:60px;height:60px;margin-top:10px;border-radius:50%;' draggable=false></img>
    <div style='margin:4px 0;color:#ffffff;font-size:12px'>${data.name}</div>
    <div style='font-size:10px;color:#bbbbbb'>Time：${data.time}</div>
    </div>`;
    }
};

export default option;
